<template>
  <div>
    <div id="refresh" @click="refresh()">刷新</div>
    <any-sign ref="anySign" :EncAlg="EncAlg" :channel="channel" :formData="formData" :businessId="businessId"
      :templateType="templateType" :templateSerial="templateSerial" :signObj="signObj" :commentsObj="commentsObj"
      :contextId="contextId" @signSubmit="signSubmit" :key="refreshKey">
    </any-sign>
    <md-button type="primary" @click="showSignDialog(20)">白板签名</md-button>
    <md-button type="primary" @click="showSignDialog(21)">逐字签名</md-button>
    <md-button type="primary" @click="showCommentDialog(30)">批注</md-button>
    <md-button type="primary" @click="getSignData()">生成上传数据</md-button>
  </div>
</template>
<script>
  import {
    Button
  } from 'mand-mobile'
  import anySignMiniCore from '@/components/anySignMiniCore2.vue'
  export default {
    components: {
      [anySignMiniCore.name]: anySignMiniCore,
      [Button.name]: Button
    },
    data() {
      return {
        refreshKey: null,
        EncAlg: 'SM2',
        channel: '10086',
        formData: 'wqerqweqeq',
        businessId: '10010',
        templateType: '',
        templateSerial: '111',
        contextId: [20, 21, 30],
        signObj: {
          signName: '玉王好的',
          signIdNo: '513436198505073748',
          signLocaType: '1', //1:关键字定位 2:坐标定位
          signRuleKeyWord: {
            keyword: '被保险人签名', // 被保险人签名   投保人签名
            xOffset: '-130', // 70
            yOffset: '0',
            pageNo: '1',
            KWIndex: '1'
          },
          signRuleXYZ: {
            left: '',
            top: '',
            right: '',
            bottom: '',
            pageNo: '',
            unit: ''
          },
          signatureConfig: {
            cid: '0',
            title: '请签名',
            titleSpanFromOffset: 4,
            titleSpanToOffset: 5,
            isTSS: false,
            nessesary: false,
            singleWidth: 50,
            singleHeight: 50,
            penColor: '#000000',
            signature_stroke_width: 10,
            signatureImgRatio: '3.0',
            signature_max_times: 2,
            isdistinguish: true
          },
          isOpenOcr: false,
          ocrObj: {
            iPAdress: 'https://dat-m.95549.cn/restful/ai/ocr/recognize',
            // iPAdress: 'http://60.247.77.116:11204/HWRV2/RecvServlet',
            businessNo: '1909111995134355467',
            businessType: 'DEMO',
            systemType: 'GH-DEMO',
          }
        },
        commentsObj: {
          signName: '李四',
          signIdNo: '513436198505073748',
          signLocaType: '1', //1:关键字定位 2:坐标定位
          signRuleKeyWord: {
            keyword: '投保人签名',
            xOffset: '3',
            yOffset: '0',
            pageNo: '1',
            KWIndex: '1'
          },
          signRuleXYZ: {
            left: '',
            top: '',
            right: '',
            bottom: '',
            pageNo: '',
            unit: ''
          },
          commentConfig: {
            cid: '30',
            commitment: '我已阅读',
            commentImgRatio: 3.0,
            mass_words_in_single_line: 25,
            mass_word_height: 50,
            mass_word_width: 50,
            comment_stroke_width: 10,
            penColor: '#FF0000',
            nessesary: false,
          },
          isOpenOcr: false,
          ocrObj: {
            iPAdress: 'http://10.56.37.53:7002',
            businessNo: '1909111995134355467',
            businessType: 'HANDWRITE_TEST',
            systemType: 'TEST',
          }
        }
      }
    },
    mounted() {},
    methods: {
      showSignDialog(id) {
        this.$refs.anySign.signDialog(id)
      },
      showCommentDialog(id) {
        this.$refs.anySign.commentDialog(id)
      },
      refresh() {
        this.commentsObj.commentConfig.commitment = '了解'
        this.refreshKey = new Date().getTime()
        // setTimeout(this.$refs.anySign.commentDialog(this.commentsObj.commentConfig.cid - 0), 50)
        this.$nextTick(function () {
          this.showCommentDialog(30)
        })
      },
      signSubmit(id, img, imgs) {
        console.log(id, img, imgs)
      },
      getSignData() {
        let signData = this.$refs.anySign.getSignInfo()
        console.log(signData)
      }
    }
  }
</script>
<style lang="less" scoped>
  #refresh {
    width: 40px;
    height: 20px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 99999;
  }
</style>